<template>
  <div class="treeMain">
    <ul>
      <li v-for="item in data" :key="item.id">
        <!-- <div class="line"> -->
        <div class="icon d-center" @click="isShow(item)">
          <i
            :class="{'el-icon-caret-bottom':item.isShow,'el-icon-caret-right':!item.isShow}"
            v-if="item.children"
          ></i>
          <i v-else></i>
        </div>
        <span :class="`tree${item.id}`" @click="nodeClick(item)">{{item.name}}</span>
        <!-- </div> -->

        <!-- <span>{{item.isShow}}</span> -->
        <el-collapse-transition>
          <div class="tree-drow" v-show="item.isShow">
            <tree
              v-if="item.children"
              :data="item.children"
              :level="level+1"
              @nodeClick="nodeClick"
            />
          </div>
        </el-collapse-transition>
        <!-- <div class="tree-drow" :class="{max:!item.isShow}">
          <tree v-if="item.children" :data="item.children" :level="level+1" @isShow="isShow" />
        </div>-->
      </li>
    </ul>
  </div>
</template>

<script>
import tree from "./treeSelect";
export default {
  name: "tree",
  props: ["data", "level"],
  components: {
    tree
  },
  data() {
    return {};
  },
  methods: {
    isShow(item) {
      item.isShow = !item.isShow;
    },
    nodeClick(item) {
      this.$emit("nodeClick", item);
    }
  },
  mounted() {
    // console.log(this.data);
  }
};
</script>

<style scoped lang="less">
.treeMain {
  // overflow-y: scroll;
  overflow: hidden;
  background: #fff;
}
ul {
  overflow: hidden;
  li {
    overflow: hidden;
    // overflow-x: hidden;

    // border-bottom: 1px solid #ccc;
    .icon {
      display: inline-block;
      width: 30px;
      height: 30px;
      cursor: pointer;
    }
    .line {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
    }
    i,
    span {
      display: inline-block;
      margin-left: 10px;
      color: #ccc;
      line-height: 40px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      width: 70%;
      cursor: pointer;
    }
    i {
      width: 30px;
      text-align: center;
      transition: all 0.3s;
    }
    span {
      color: black !important;
      font-weight: normal !important;
    }
  }
  .tree-drow {
    margin-left: 15px;
    // transition: max-height 0.3s;
    overflow: hidden;
    // max-height: 300px;
  }
  .max {
    max-height: 0;
  }
}
</style>